<template>
  <div class="dialog-style-test">
    <div class="container">
      <h1>对话框样式统一测试</h1>
      <p>测试所有对话框组件的视觉一致性</p>

      <!-- 测试按钮组 -->
      <div class="test-buttons">
        <BaseButton type="primary" @click="showLogin = true">
          登录表单
        </BaseButton>
        <BaseButton type="primary" @click="showRegister = true">
          注册表单
        </BaseButton>
        <BaseButton type="primary" @click="showChangePassword = true">
          修改密码
        </BaseButton>
        <BaseButton type="primary" @click="showEditProfile = true">
          编辑个人信息
        </BaseButton>
        <BaseButton type="primary" @click="showSaveTemplate = true">
          保存为模板
        </BaseButton>
        <BaseButton type="primary" @click="showTestDialog = true">
          基础对话框
        </BaseButton>
      </div>

      <!-- 样式对比说明 -->
      <div class="style-info">
        <h2>统一设计规范</h2>
        <div class="spec-grid">
          <div class="spec-item">
            <h3>对话框尺寸</h3>
            <ul>
              <li>标准宽度: 500px-600px</li>
              <li>最大高度: 80vh</li>
              <li>移动端: 全宽显示</li>
            </ul>
          </div>
          <div class="spec-item">
            <h3>视觉样式</h3>
            <ul>
              <li>圆角: 4px</li>
              <li>阴影: Element Plus标准</li>
              <li>边框: #dcdfe6</li>
            </ul>
          </div>
          <div class="spec-item">
            <h3>表单布局</h3>
            <ul>
              <li>标签宽度: 80px-100px</li>
              <li>字体大小: 14px</li>
              <li>行高: 40px</li>
            </ul>
          </div>
          <div class="spec-item">
            <h3>按钮样式</h3>
            <ul>
              <li>主要按钮: #409eff</li>
              <li>次要按钮: #909399</li>
              <li>间距: 10px</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 所有对话框组件 -->
    <LoginForm v-model="showLogin" />
    <RegisterForm v-model="showRegister" />
    <ChangePasswordForm v-model="showChangePassword" />
    <EditProfileForm v-model="showEditProfile" />
    <SaveAsTemplateForm v-model="showSaveTemplate" />
    
    <!-- 基础对话框测试 -->
    <BaseDialog
      v-model:visible="showTestDialog"
      title="基础对话框测试"
      width="500px"
    >
      <div class="test-content">
        <p>这是一个基础对话框，用于测试统一的样式规范。</p>
        <p>所有对话框都应该具有相同的视觉风格：</p>
        <ul>
          <li>相同的圆角和阴影</li>
          <li>一致的标题样式</li>
          <li>统一的按钮布局</li>
          <li>相同的间距和字体</li>
        </ul>
      </div>
    </BaseDialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BaseButton from '../components/common/BaseButton.vue'
import BaseDialog from '../components/common/BaseDialog.vue'
import LoginForm from '../components/auth/LoginForm.vue'
import RegisterForm from '../components/auth/RegisterForm.vue'
import ChangePasswordForm from '../components/auth/ChangePasswordForm.vue'
import EditProfileForm from '../components/profile/EditProfileForm.vue'
import SaveAsTemplateForm from '../components/template/SaveAsTemplateForm.vue'

// 对话框显示状态
const showLogin = ref(false)
const showRegister = ref(false)
const showChangePassword = ref(false)
const showEditProfile = ref(false)
const showSaveTemplate = ref(false)
const showTestDialog = ref(false)
</script>

<style scoped>
.dialog-style-test {
  padding: 40px 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  color: #303133;
  text-align: center;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
}

.dialog-style-test > .container > p {
  text-align: center;
  color: #606266;
  margin-bottom: 40px;
  font-size: 16px;
}

.test-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 50px;
}

.style-info {
  background: #ffffff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.style-info h2 {
  color: #303133;
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.spec-item {
  background: #f9fafc;
  border-radius: 6px;
  padding: 20px;
  border: 1px solid #e4e7ed;
}

.spec-item h3 {
  color: #409eff;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
}

.spec-item ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
}

.spec-item li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.test-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.test-content p {
  margin-bottom: 15px;
}

.test-content ul {
  margin: 15px 0;
  padding-left: 20px;
}

.test-content li {
  margin-bottom: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dialog-style-test {
    padding: 20px 10px;
  }
  
  .test-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .test-buttons .base-button {
    width: 200px;
  }
  
  .spec-grid {
    grid-template-columns: 1fr;
  }
  
  .style-info {
    padding: 20px;
  }
}
</style>
